<template>
  <div class="transfer-page">
      <div class="head">
          <img src="../../assets/perfromImg/4.png" alt="" @click="returnPage">
          <span class="title">抵消卡划拨</span>
      </div>
      <div class="accept-box">
          <div class="left">
              <img src="../../assets/perfromImg/1.png" alt="">
              <span>接收人</span>
          </div>
          <div class="right" @click="showPicker">
              <span>{{accept}}</span>
              <img src="../../assets/perfromImg/5.png" alt="">
          </div>
      </div>
       <div class="accept-box">
          <div class="left">
              <img src="../../assets/perfromImg/2.png" alt="">
              <span>划拨数量</span>
          </div>
          <div class="right" @click="showPickers">
              <span>{{count}}</span>
              <img src="../../assets/perfromImg/5.png" alt="">
          </div>
      </div>

      <!-- 您的卡 -->
      <div class="my-card">
          <div class="title">您的卡</div>
          <div class="tip">*红色部分代表被划拨掉的卡</div>
          <div class="order" v-for="(item,index) in cardList" :key="index">
              <div class="order-item">序列号:{{item.cardno}}</div>
          </div>
          <div class="order" v-if="cardList.length==0">
              <div class="order-item">暂无划拨卡数据</div>
          </div>
      </div>

    <div class="limit-head" ></div>
    <div class="tushi" v-if="tushi">
       <span>您没有这么多卡</span>
    </div>
    <div class="tushi" v-if="mounts">
       <span>请选择划拨数量</span>
    </div>
    <div class="tushi" v-if="jsr">
       <span>请选择接收人</span>
    </div>
    <div class="tushi" v-if="msgs">
       <span>划拨成功</span>
    </div>

      <div class="submit" @click="submits">立即提交</div>


       <van-popup v-model="showClassPicker" position="bottom">
           <van-picker show-toolbar :columns="countList" @confirm="onClassConfirm" @cancel="showClassPicker = false"/>
        </van-popup>
       <van-popup v-model="showClassPickers" position="bottom">
           <van-picker show-toolbar :columns="acceptList"  value-key='nickname' @confirm="onClassConfirms" @cancel="showClassPickers = false"/>
        </van-popup>
  </div>

</template>

<script>
let selecard=[]
import { Picker } from 'vant'
import {jsData,suData} from '../../sever/request'
import $ from "jquery";
export default {
     components: {
        vanPicker: Picker,
    },
   data() {
       return {
           accept:'请选择',
           count:'请选择',
           countList:[
               {text:'1'},
               {text:'2'},
               {text:'5'},
               {text:'15'},
               {text:'45'},
           ],
           acceptList:[
               {text:'张三'},
               {text:'李四'},
           ],
           cardList:[],
           showClassPicker:false,
           showClassPickers:false,
            shop_id:132,
            token:'46a9b0de-2c2d-4280-bc0f-d4e8590738e2',
            tushi:false,
            mounts:false,
            jsr:false,
            msgs:false,
            currentIndex:0,
            color:{
                color:''
            },
            selecards:[],
            user_id_to:null
       }
   },

   created() {
        let store = this.$route.query;
        if (store.shop_id != undefined) {
        this.shop_id = store.shop_id;
        }
        if (store.token != "" && store.token != undefined) {
        this.token = store.token;
        }
        this.getData()
    },




   methods: {
       showPickers(){
             this.showClassPicker=true
        },
       showPicker(){
             this.showClassPickers=true
        },
        
        onClassConfirms(v){
              this.accept = v.nickname;
              this.user_id_to=v.id
              this.showClassPickers = false;
        },
        returnPage() {
				uni.navigateBack({
					delta: 1
				});
        },

        getData(){
            jsData({
                 token: this.token,
                  shop_id:this.shop_id,
            }).then((res)=>{
                if(res.data.code==1){
                    this.acceptList=res.data.data.users
                    this.cardList=res.data.data.Cards
                }
            })
        },

      onClassConfirm(v){
              selecard=this.selecards
              let list=this.cardList
              this.count = v.text;
              this.showClassPicker = false;
              let num=parseInt(this.count)
               let cardNum = $(".order-item").length;
              if(num <=cardNum){
                 selecard=[]
                 $(".order-item").css("color","black");
                 $(".order-item:lt("+num+")").each(function(i,el){
                 $(el).css("color","red");
                   selecard.push(list[i].id);
                })
              }else{
                  $(".order-item").css("color","black");
                   this.tushi=true
                   setTimeout(() => {
                    this.tushi=false
                 }, 1000);
              }

        },



        submits(){
             if(this.accept=='请选择'){
                this.jsr=true
                 setTimeout(() => {
                    this.jsr=false
                 }, 1000);
                 return
            }
            if(this.count=='请选择'){
                this.mounts=true
                 setTimeout(() => {
                    this.mounts=false
                 }, 1000);
                return
            }

              suData({
                    selecard:selecard,
                    huabo_number:this.count,
                    user_id_to:this. user_id_to,
                    shop_id:this.shop_id,
                    token:this.token
                }).then(res=>{
                    if(res.data.code==1){
                        this.getData()
                        this.msgs=true
                         setTimeout(() => {
                                this.msgs=false
                            }, 1000);
                    }else{
                        console.log(res.data.msg)
                    }
                })
        }


   },
}
</script>
<style lang="less" scoped>
     .transfer-page{
         .head{
             width: 10rem;
             height: 1.906667rem;
             display: flex;
             justify-content: flex-start;
             align-items: center;
             background:url('../../assets/perfromImg/3.png') no-repeat ;
             background-size: cover;
             img{
                margin: .933333rem 0 0 .266667rem;
                width: .24rem;
                height: .426667rem;
             }
             .title{
                font-size: .44rem;
                color: #FFFFFF;
                margin:.933333rem 0 0 3.386667rem;
             }
         }
         .accept-box{
              width: 10rem;
              height: 1.493333rem;
              background-color: #fffefe;
	          box-shadow: 0px .053333rem .213333rem 1px rgba(0, 0, 0, 0.03);
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: .133333rem;
              .left{
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  margin-left: .533333rem;
                  img{
                      width: .4rem;
                      height: .4rem;
                  }
                  span{
                      font-size: .44rem;
                      color: #000000;
                      font-weight: bold;
                      margin-left: .133333rem;
                  }
              }
              .right{
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  margin-right: .533333rem;
                  span{
                      font-size: .44rem;
                      color: #999999;
                      margin-right: .133333rem;
                  }
                  img{
                      width: .426667rem;
                      height: .253333rem;
                  }
              }
         }
         .my-card{
                width: 10rem;
                height: 9.04rem;
                scrollbar-width: none;
                overflow: hidden;
                overflow-y: auto;
                background-color: #fffefe;
                box-shadow: 0px .053333rem .213333rem 1px 
                    rgba(0, 0, 0, 0.03);
                .title{
                    margin-left: .493333rem;
                    padding-top: .506667rem;
                    font-size: .44rem;
                    color: #000000;
                }
                .tip{
                    font-size: .333333rem;
                    color: #999999;
                    margin:.266667rem 0 0 .8rem;
                }
                .order{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: .533333rem;
                    .order-item{
                        font-size: .4rem;
                        color: #666666;
                    }
                    .order-items{
                        font-size: .4rem;
                        color: red;
                    }
                }    
         }

          .limit-head {
            position: relative;
            height: 1rem;
            line-height: 0.5rem;
            text-align: center;
            i {
            display: block;
            height: 2px;
            background: #dadada;
            position: absolute;
            top: 0.9rem;
            width: 100%;
            }
            .jinxuan {
            display: inline-block;
            font-size: 0.4rem;
            font-weight: bold;
            color: #888787;
            background: #fff;
            padding: 0 0.875rem;
            text-align: center;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            }
        }

        .tushi{
            width: 4rem;
            height: 1rem;
            background-color: #000000;
            opacity: 0.5;
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 1rem;
            span{
                display: inline-block;
                font-size: .4rem;
                color: #fff;
            }
        }
         .submit{
            width: 7.186667rem;
            height: 1.053333rem;
            margin: .533333rem auto;
            background-color: #009688;
            border-radius: .066667rem;
            text-align: center;
            line-height:1.053333rem;
            font-size: .44rem;
            color: #fffefe;
         }
     }
</style>